const gulp = require("gulp");
//引入gulp可用其api

//css相关的任务
//依赖包  npm i -D gulp-cssmin
//会体现在json文件里
//回调函数需要return
//引入gulp-cssmin
const cssmin = require('gulp-cssmin')
gulp.task('css', function () {
    return gulp.src('./src/css/**') //把src的css文件夹下的所有子文件
        .pipe(cssmin()) //进行压缩
        .pipe(gulp.dest('./dist/css/')) //然后复制装到dist的css文件夹里面去
})

//sass相关的任务
//依赖包 npm i sass -D   npm i gulp-sass -D

//引入sass 将sass和gulp结合
const sassObj = require('sass')
const sassGulp = require('gulp-sass')
const sass = sassGulp(sassObj)
gulp.task('sass', function () {
    return gulp.src('./src/sass/**') //sass文件下的所有子文件
        .pipe(sass()) //进行sass转css处理
        .pipe(cssmin()) //进行css压缩处理
        .pipe(gulp.dest('./dist/css')) //放到对应文件夹
})

//js相关任务
//依赖包- npm i -D gulp-uglify
//es6转es5 需要三个依赖  
//npm i - D gulp - babel @7 .0 .1
//npm i - D babel - core
//npm i - D babel - preset - es2015

//但是只需要引入babel
//引入uglify和babel
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')

gulp.task('js', function () {
    return gulp.src('./src/js/**')
        // .pipe(babel({
        //     presets: ['es2015'] //转入的版本号
        // }))
        // .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))

})

//html相关任务
//依赖 npm i -D gulp-htmlmin
//引入htmlmin
const htmlmin = require('gulp-htmlmin')

gulp.task('html', function () {
    return gulp.src('./src/pages/**')
        .pipe(htmlmin({
            removeEmptyAttributes: true,
            collapseWhitespace: true
        })).pipe(gulp.dest('./dist/pages/'))
})

//lib和static相关的任务
//不需要压缩 直接复制一份过去就行了 lib里面装的时所有的第三方包 css js等
//static里面装的是静态页面 图片等

gulp.task('lib', function () {
    return gulp.src('./src/lib/**')
        .pipe(gulp.dest('./dist/lib/'))
})

gulp.task('static', function () {
    return gulp.src('./src/static/**')
        .pipe(gulp.dest('./dist/static/'))
})

//清除已经生成的dist
/**
 * 如果更改了文件名再次进行dest的话就会导致原本的文件和新文件都存在dist里面
 * 所以在每次执行操作之前需要先清除一次dist
 * 依赖包 npm i -D gulp-clean
 * 引入'gulp-clean'
 */

const clean = require('gulp-clean')
gulp.task('clean', function () {
    return gulp.src('./dist', {
            allowEmpty: true
        }) //清空这个dist文件夹 允许文件夹为空执行操作
        .pipe(clean())
})

//web服务 添加了这个之后 运行gulp时不再需要点击打开到浏览器执行 这个web服务器会直接启动配置中的默认页面
//依赖包 npm i -D gulp-webserver
//引入'gulp-webserver'
const webserver = require('gulp-webserver')
gulp.task('webserver', function () {
    return gulp.src('./dist')
        .pipe(webserver({
            host: 'localhost', //配置服务器主机
            port: 3001, //端口号
            livereload: true, //自动刷新
            open: './pages/login.html' //默认页面
        }))
})

//所有任务都已经定义好了 现在需要配置一个直接输入gulp就能执行所有操作并且实时监听他们的改变并且跟随改变的默认动作
gulp.task('watch', function () {
    gulp.watch('./src/css/**/**', gulp.parallel('css'))
    gulp.watch('./src/sass/**/**', gulp.parallel('sass'))
    gulp.watch('./src/js/**/**', gulp.parallel('js'))
    gulp.watch('./src/pages/**/**', gulp.parallel('html'))
    gulp.watch('./src/lib/**/**', gulp.parallel('lib'))
    gulp.watch('./src/static/**/**', gulp.parallel('static'))
})

//然后配置他们的执行顺序
//先清除  再并发复制添加 再启动web服务 再监听变化
exports.default = gulp.series('clean', gulp.parallel('css', 'js', 'sass', 'html', 'lib', 'static'), 'webserver', 'watch')